/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-04-06 09:39:31
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-05-11 16:57:49
 */
import React, { useState, useEffect } from "react";
import "./index.scss";
export default (props: any) => {
  const {
    onCancel,
    title = "提示",
    children = null,
    okText,
    footer,
    onlySuccess
  } = props;
  const [visible, setVisible] = useState(props.visible);

  useEffect(() => {
    setVisible(props.visible);
  }, [props.visible]);

  return (
    <div
      className="common-mask"
      style={{
        position: "fixed",
        zIndex: 9999,
        left: 0,
        top: 0,
        width: "100%",
        height: "100%",
        backgroundColor: "rgba(0,0,0,.6)",
        display: visible ? "block" : "none"
      }}
    >
      <div
        style={{
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <div className="content-wrap">
          <div style={{ ...props.style }} className="content">
            <p className="title">{title}</p>
            {children}
          </div>

          {onlySuccess && (
            <div style={{ width: "100%" }} className="handle">
              <div
                onClick={() => {
                  if (onCancel) {
                    onCancel();
                  } else {
                    setVisible(false);
                  }
                }}
                className="onlyConfirm"
              >
                确定
              </div>
            </div>
          )}
          {footer === null ? null : footer}
          {footer === undefined && (
            <div className="handle">
              <div
                className="close"
                onClick={() => {
                  if (onCancel) {
                    onCancel();
                  } else {
                    setVisible(false);
                  }
                }}
              >
                关闭
              </div>

              <div className="confirm">确定</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
